<template>
    <div class="selectItem ver-mid inline-block" >
        <!-- 主下拉框 -->
        <div class="select_body" @click="slide()">
            <span class="form_label" ref="main_text" :name="name">
                {{text}}
            </span>
            <span class="select_main_icon pos-mid" style="right:0;">
                <i class="bi bi-chevron-down"></i>
            </span>
        </div>
        <!-- 下拉框数据 -->
        <transition name="select_data_tran">
            <div class="select_data"  v-if="isShow" :class="{select_data_abs:abs}">
                <ul class="data_ul" v-if="data!=null && data.length > 0">
                    <li class="data_li" :class="{select_back:main_text.value == item.id}" v-for="item in data" :key="item.id" @click="select(item)">{{item.name}}</li>
                </ul>
                <ul class="data_ul" v-else>
                    <p>暂无任何数据</p>
                </ul>
            </div>
        </transition>
        
    </div>
</template>
<script>
import { isObjectEmptyBool } from '../../../assets/js/BaseUtils.js';
import {ref,onMounted,watch} from 'vue';
export default {
    name:'g-f-select',
    props:{
        back_data:{
            type:Object,
            default:null
        },
        data:{
            type:Array,
            default:[]
        },
        name:{
            type:String,
            default:''
        },
        text:{
            type:String,
            default:'请选择'
        },
        abs:{
            type:Boolean,
            default:true
        }
    },
    setup(props){
        let isShow = ref(false);
        let main_text = ref(props.text);
        let abs = ref(props.abs);
        let back_data = ref(props.back_data);

        let slide = ()=>{
            isShow.value = !isShow.value;
        }

        // 因为FramePop组件可能会使用lazyLoad方法，所以需要监听back_data数据变化并且赋值
        watch(()=>props.back_data,(val)=>{
            back_data.value = val;
            backDataEval();
        })
        onMounted(()=>{
            if(back_data.value != null){
                backDataEval();
            }
        })
        // 给main_text赋值
        function backDataEval(){
            main_text.value.innerText = back_data.value.name;
            main_text.value.value = back_data.value.id;
            main_text.value.name = props.name;
        } 

        
        let select = (item)=>{
            // 设置标签的innerText
            main_text.value.innerText = item.name;
            // 设置标签的value
            main_text.value.value = item.id;
            // 设置标签的name属性你
            main_text.value.name = props.name;
            isShow.value = !isShow.value;
        }
        return {
            back_data,
            abs,
            isShow,main_text,
            slide,select
        }
    }
}
</script>
<style scoped>
    .selectItem::-webkit-scrollbar {
        display: none;
        /* background-color: var(--normal-background);
        width: 1px;
        border-radius: 5px; */
    }
    .selectItem::-webkit-scrollbar-thumb{
        /* border-radius: 2px;
        background-color: var(--default-background-dark); */
    }
    .selectItem{
        /* background: black; */
        position: relative;
        z-index: 99;

    }
    .select_main_icon{
        border-radius: 3px;
        padding: 10px;
    }
    .select_body{
        cursor: pointer;
        position: relative;
        width: cacl(100% - 20px);
        padding: 10px;
        border: 1px solid #d9d9d9;
        border-radius: 3px;
        font-size: 15px;
        background-color: var(--default-background);
    }
    .select_data{
        padding: 5px;
        border: 1px solid #d9d9d9;
        border-radius: 3px;
        font-size: 15px;
        background-color: var(--default-background);
        margin-top: 5px;
        
        z-index: 999;
        max-height: 200px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .select_data::-webkit-scrollbar{
        display: none;
    }
    .select_data_abs{
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
    }

    /* --------------------------------------- */
    .data_ul{
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .data_li{
        cursor: pointer;
        transition: 0.3s;
        padding: 10px;
        background-color: var(--default-background);
        margin-bottom: 5px;
    }
    .data_li:hover{
        padding: 10px;
        background-color: var(--light-background);
        border-radius: 3px;
    }
    /*  */
    .select_data_tran-enter-active,
    .select_data_tran-leave-active{
        transition: all 0.3s;
    }
    .select_data_tran-enter-from,
    .select_data_tran-leave-to{
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        border: 0px solid white;
    }
    .select_back{
        background-color: var(--light-background);
    }
    
</style>